<template>
 <div class="login_container">
    <!-- <div class="login_herder"> -->
          <!-- 统一身份管理系统 -->
        <!-- <img src="../assets/image/bg_1.png" alt=""> -->
        <!-- 电子烟 · 管理系统 -->
    <!-- </div> -->
    <div class="login_box">
        <div class="login_boxs">
            <div class="login_boxleft"></div>
            <div class="login_boxright">
                <div class="right_text">
                    <span>电子烟</span>
                    <span>销售管理系统</span>
                </div>
                <el-form ref="loginFormRef" :model="loginForm" label-width="80px" :rules="loginFormRules">
                    <el-form-item prop="phone" >
                        <el-input   prefix-icon="el-icon-user-solid" placeholder="请输入账号或手机号码" v-model="loginForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" >
                        <el-input     prefix-icon="iconfont iconmima " placeholder="请输入密码"  type="password" v-model="loginForm.password"></el-input>
                    </el-form-item>
                     <el-form-item prop="code" class="code">
                        <el-input    placeholder="请输入验证码" v-model="loginForm.code" style="width:50%"></el-input>
                         <!-- <div class="login-code"> -->
                        <!-- <img :src="imgsrc" @click="getCodes" /> -->
                        <img class="codeImg" :src="`http://106.54.252.29:8080/api/code?s=${random}`" @click="random = +new Date()" />
                        <!-- <img class="codeImg" :src="`http://192.168.1.11:8080/api/code?s=${random}`" @click="random = +new Date()" /> -->
                        <!-- </div> -->
                    </el-form-item>
                </el-form>
                <el-button @click="goHome">登录</el-button>
                <div class="alink">
                    <!-- <a href="#" class="el-icon-circle-plus-outline"> 创建账号</a>
                    <a href="#" class="el-icon-question"> 忘记密码</a> -->
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="footer">
        <img class="img" src="../assets/image/bg_3.png" alt="">
    </div> -->
 </div>
</template>

<script>
// 引入mock
import mock from '../mock/mock.js'
export default {
  data () {
    return {
      random: +new Date(),
      codeUrl: '',
      imgsrc: '',
      // 登入表单对象
      loginForm: {
        phone: '13570856683',
        password: '123456',
        code: ''
      },
      loginFormRules: {
        phone: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' }
        ],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      }
    }
  },
  created () {
    this.getCode()
  },
  methods: {
    getCodes () {},
    async getCode () {
      // const res = await this.$axios.get('/api/code')
      // console.log(res)
      // console.log(res.data)
      // const url = window.URL.createObjectURL(new Blob([res.data]))
      // console.log(url)
      // this.imgsrc = url
      // this.$axios.get('/api/code', { responseType: 'arraybuffer' })
      //   .then(res => {
      //     console.log(res)
      //     this.imgsrc = 'data:image/png;base64,' + btoa(
      //       new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      //   })
    },
    goHome () {
      // 表单确定验证
      this.$refs.loginFormRef.validate(valid => {
        // console.log(valid)
        if (!valid) return
        var qs = require('qs')
        this.$axios.post('/api/mlogin', qs.stringify(this.loginForm, { indices: false })).then(async response => {
        //   console.log(response.data)
          const res = await response.data
          console.log(res)
          // this.$router.push('/home')
          // if (res.code === 500) {
          //   console.log(5)
          //   this.$message.success('请联系管理员')
          // }
          if (res.code === 0) {
            console.log(res)
            this.$message.success('登入成功')
            window.sessionStorage.setItem('token', res.data)
            this.$router.push('/home')
          }
        })
      })
    }
  }

}
</script>

<style lang='less' scoped>
    .login_container {
        background-color: #fff;
        height: 100%;
        //  padding: 0 20px;
    }
    .login_herder {
        height: 124px;
        line-height: 124px;
        padding-left: 450px;
        font-size: 28px;
        font-family: "Microsoft YaHei";
        font-weight: 900;
    }
    .login_box {
        background: url(../assets/image/bg12.jpg)no-repeat;
        height: 100%;
        position: relative;
    }
    .login_boxs {
        display: flex;
        background-color: #fff;
        height: 400px;
        width:  1000px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .3);
        box-sizing:border-box ;
        border-radius: 5px;
        .login_boxleft {
            width: 500px;
            height: 400px;
            background: url(../assets/image/cp3.jpg)no-repeat;
            background-size:  cover ;
            border-radius: 10px 0 0 10px;
        }
        .login_boxright {
            width: 500px;
            height: 400px;
            padding: 10px 50px;
            box-sizing:border-box ;
            .right_text {
                box-sizing:border-box ;
                height: 105px;
                width: 100%;
                line-height: 105px;
                background-color: #fff;
                font-size: 20px;
                font-family: "Microsoft YaHei";
                font-weight: 900;
            }
            .right_text span:first-child{
                // margin-right: 5px;
            }
            .code {
              display: flex;
              align-items: center;
            }
            .codeImg {
              height: 40px;
              margin-left: 50px;
              border:none;
              vertical-align: middle;
            }
            .el-form-item {
                // width: ;
                 margin: 10px 0;
                margin: 0 ;
                 height: 48px;
                 margin-bottom: 20px;
            }
            .el-form-item /deep/ .el-form-item__content {
                margin-left: 0 !important;
            }
            .el-form .el-input {
               height: 48px;
            }
            .el-button {
                width: 100%;
                background-color: #409EFF;
                color: #fff;
                 margin-bottom: 35px;
            }
            .alink {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                 color: #409EFF;
            }
            .alink a{
                color: #409EFF;
                cursor: pointer;
            }
        }
    }
    .footer {
        margin-top: 35px;
        width: 100%;
        height: 50px;
        .img{
            width: 100%;
        }
    }
</style>
